<template>
  <Card>
    <p slot="title">
      <Icon type="ios-pricetag"></Icon>
      类别
    </p>

    <div class="body">

      <div style="margin-bottom: 25px;">
        <Button type="ghost" icon="ios-plus-empty" @click="add_modal=true">添加一列</Button>

        <label style="margin-left: 50px">关键字:</label>
        <Input style="width: 150px;margin-left: 6px;" icon="search" type="text" v-model="searchInput"
               placeholder="关键字查询..." clearable/>
        <Button type="ghost" @click="searchClick">查询</Button>
      </div>

      <edit-table :loading="loading" v-model="data" :columns-list="columns" @on-delete="deleteListener"
                  @on-change="saveListener"></edit-table>

      <div style="margin: 10px;overflow: hidden">
        <br/>
        <div align="center">
          <Page :page-size="pageConfig.size" :total="pageConfig.total" :current="pageConfig.currentPage"
                @on-change="changePage"></Page>
        </div>
      </div>
    </div>

    <Modal
      v-model="add_modal"
      title="新增一个分类"
      @on-ok="addEvent">
      <span style="margin-right: 10px">分类名:</span>
      <Input type="text" v-model="addTagName" clearable placeholder="请输入分类名称" :maxlength="10"/>
    </Modal>
  </Card>
</template>

<script>
  import editTable from './public/editTable/canEditTable.vue';

  export default {
    name: "RootLabel",
    components: {
      editTable
    },
    data() {
      return {
        loading: false,
        add_modal: false,
        addTagName: '',
        searchInput: '',
        columns: [
          {
            title: '序号',
            type: 'index',
            width: 80,
            align: 'center'
          },
          {
            title: '分类名',
            key: 'labelName',
            id: '1',
            align: 'center',
            editable: true
          },
          {
            title: '文章量',
            key: 'articleCount',
            align: 'center',
            sortable: true
          },
          {
            title: '操作',
            align: 'center',
            key: 'handle',
            width: 220,
            handle: ['edit', 'delete']
          }
        ],
        data: [],
        pageConfig: {
          size: 6,
          total: 0,
          currentPage: 1,
          key: ''
        }
      }
    },
    mounted() {
      this.$emit('selectMenu', '1-4-2');
    },
    created() {
      this.request(this.pageConfig.key, 1);
    },
    methods: {
      saveListener(data, index) {
        let dat = data[index];
        this.http.get('/update-sort', {
          name: dat.labelName,
          id: dat.id
        }, suc => {
          this.$Message.success("更新成功");
        }, error => {
          this.$Message.error(error);
        })
      },
      deleteListener(data, index) {
        let dat = data[index];
        this.http.get('/del-sort', {
          id: dat.id
        }, suc => {
          this.$Message.success("删除成功");
        }, error => {
          this.$Message.error(error);
        })
      },
      changePage(page) {
        this.request(this.pageConfig.key, page);
      },
      addEvent() {
        let val = this.addTagName;
        if (val.length == 0) {
          this.$Message.error("不能输入为空哦");
        } else {
          this.http.get('/add-sort', {
            name: val
          }, suc => {
            this.data.push({labelName: val, articleCount: 0});
            this.$Message.success("添加成功");
          }, error => {
            this.$Message.error(error);
          });
        }
      },
      searchClick() {
        let val = this.searchInput;
        if (val.length == 0) {
          this.pageConfig.key = '';
        } else {
          this.pageConfig.key = val;
        }

        this.request(this.pageConfig.key, 1);
      },
      request(key, page) {  //统一请求服务器的方法接口
        this.data.length = 0;
        this.loading = true;
        this.http.get('/get-sort-all', {
          key: key,
          isSplit: true,
          page: page,
          size: this.pageConfig.size
        }, data => {
          let list = data.records;
          this.pageConfig.total = data.total;
          this.pageConfig.currentPage = data.current;
          list.forEach(item => {
            let id = item.sort.id;
            let name = item.sort.name;
            let count = item.count;
            let data = {labelName: name, id: id, articleCount: count};
            this.data.push(data);
          });
          this.loading = false;
        }, error => {
          this.$Message.error(error);
        })
      }
    }
  }
</script>

<style lang="stylus" scoped>
  .body
    margin: 10px
</style>
